<section class="filter-wrap">
    <div class="container">
        <h1 class="page-title">找个人</h1>
        <article class="fil-item">
            <div class="fil-pro">职业：</div>
            <div class="fil-val"><a class="cur" href="">全部</a><a href="">导演</a><a href="">制片人</a><a href="">编剧</a><a href="">演员</a><a href="">模特</a><a href="">摄影师</a><a href="">灯光师</a><a href="">剪辑师</a><a href="">特效师</a><a href="">动画师</a><a href="">调色师</a><a href="">化妆</a><a href="">服装</a><a href="">道具</a><a href="">置景</a><a href="">录音师</a><a href="">配音师</a><a href="">剧照</a><a href="">配乐</a><a href="">音效师</a><a href="">航拍师</a><a href="">其他</a></div>
        </article>
        <article class="fil-item">
            <div class="fil-pro">所在地：</div>
            <div class="fil-val" id="id-area" style="width: 88%; height: 28px;"><a class="cur" href="">全部</a><a href="">北京市</a><a href="">广东省</a><a href="">浙江省</a><a href="">四川省</a><a href="">江苏省</a><a href="">上海市</a><a href="">山东省</a><a href="">福建省</a><a href="">天津市</a><a href="">辽宁省</a><a href="">湖南省</a><a href="">湖北省</a><a href="">河南省</a><a href="">陕西省</a><a href="">河北省</a><a href="">河南省</a><a href="">陕西省</a><a href="">河北省</a><a href="">云南省</a><a href="">贵州省</a><a href="">黑龙江省</a><a href="">甘肃省</a><a href="">安徽省</a><a href="">广西壮族自治区</a><a href="">吉林省</a><a href="">江西省</a><a href="">山西省</a><a href="">内蒙古自治区</a><a href="">新疆维吾尔自治区</a><a href="">海南省</a><a href="">香港特别行政区</a><a href="">海外</a><a href="">其他</a></div>
            <div class="inb more-province-wrap" id="more_province">
                <a class="inb more-province">展开</a>
                <div class="more-province-tri more-province-tri-down inb"></div>
                <div class="more-province-tri more-province-tri-up inb hidden"></div>
            </div>
    </article>
        <article class="fil-item">
            <div class="fil-pro">认证：</div>
            <div class="fil-val"><a class="cur" href="">全部</a><a href="">职业认证</a><a href="">实名认证</a></div>
        </article>
        <article class="fil-item">
            <div class="fil-pro">排序：</div>
            <div class="fil-val"><a class="cur" href="">站点推荐</a><a href="">人气最高</a><a href="">作品最多</a><a href="">新成员</a></div>
        </article>
    </div>
</section>

<script>
    var areadiv=$("#id-area");
    var moreProvince=$("#more_province");
    moreProvince.hover(function(){
        moreProvince.find(".more-province").addClass("more-province-hover");
        moreProvince.find(".more-province-tri-down").addClass("more-province-tri-down-hover");
        moreProvince.find(".more-province-tri-up").addClass("more-province-tri-up-hover");
    },function(){
        moreProvince.find(".more-province").removeClass("more-province-hover");
        moreProvince.find(".more-province-tri-down").removeClass("more-province-tri-down-hover");
        moreProvince.find(".more-province-tri-up").removeClass("more-province-tri-up-hover");
    });
    moreProvince.click(function(){
        var areadivHei=areadiv.css("height");
        var moveHeight=parseInt(areadivHei)>29?28:58;
        areadiv.animate({
            height:moveHeight
        })
        if(parseInt(areadivHei)>29){
            moreProvince.find("a.more-province").text("展开");
            $(".more-province-tri-down").removeClass("hidden").addClass("inb");
            $(".more-province-tri-up").removeClass("inb").addClass("hidden");
        }
        else{
            moreProvince.find("a.more-province").text("收起");
            $(".more-province-tri-down").removeClass("inb").addClass("hidden");
            $(".more-province-tri-up").removeClass("hidden").addClass("inb");
        }
    });
</script>